<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI-3-菜单按钮</title>
    <script type="text/javascript"
            src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript"
            src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css"
          href="/js/jquery-easyui-1.4.1/themes/icon.css"/>
    <link rel="stylesheet" type="text/css"
          href="/js/jquery-easyui-1.4.1/themes/default/easyui.css"/>
    <script type="text/javascript">
        /*通过js创建表格  */
        $(function () {
            $("#table3").datagrid({
                /*定义工具栏  */
                toolbar: [{
                    iconCls: 'icon-edit',
                    handler: function () {
                        alert("点击工具栏")
                    }
                }, '-', {
                    iconCls: 'icon-help',
                    handler: function () {
                        alert('帮助工具栏')
                    }
                }, '-', {
                    iconCls: 'icon-save',
                    handler: function () {
                        alert('保存工具栏')
                    }
                }],
                columns: [[
                    {field: 'itemIds', checkbox: true},
                    {field: 'itemId', title: '商品Id', width: 100},
                    {field: 'itemName', title: '商品名称', width: 100},
                    {field: 'itemDesc', title: '商品描述', width: 100, align: 'right'}
                ]],
                fitColumns: true,		  //自动适应
                url: "datagrid_item.json", //请求数据的地址
                method: "get",			  //提交方式
                striped: true,			  //有条纹的行
                nowrap: true,			  //提高加载性能
                loadMsg: "正在加载",		  //加载数据时打印
                pagination: true,		  //分页加载
                rownumbers: true,		  //显示行号
                //singleSelect:true,	      //只允许选中一行数据
            })
        })
    </script>
</head>
<body>
<h1>Easy-表格数据1</h1>
<div>
    <table class="easyui-datagrid" style="width:400px;height:250px">
        <thead>
        <tr>
            <th data-options="field:'code'">Code</th>
            <th data-options="field:'name'">Name</th>
            <th data-options="field:'price'">Price</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>001</td>
            <td>name1</td>
            <td>2323</td>
        </tr>

        <tr>
            <td>002</td>
            <td>name2</td>
            <td>4612</td>
        </tr>

        <tr>
            <td>003</td>
            <td>name3</td>
            <td>4612</td>
        </tr>
        </tbody>
    </table>
</div>
<hr/>
<h1>通过数据请求创建表格</h1>
<div>
    定义表格，并且通过url访问json数据， fitColumns:true表示自动适应，singleSelect:true 表示选中单个
    <!--fitColumns: 列自适应, singleSelect: 是否单选, pagination: 是否分页-->
    <table class="easyui-datagrid" style="width:500px;height:300px"
           data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:true,pagination:true">
        <thead>
        <tr>
            <th data-options="field:'code',width:100">Code</th>
            <th data-options="field:'name',width:100">Name</th>
            <th data-options="field:'price',width:100,align:'right'">Price</th>
        </tr>
        </thead>
    </table>
</div>
<hr/>
<h1>通过js创建表格</h1>
<table id="table3" style="width:700px">

</table>
</body>
</html>